<template>
  <div>
    <div class="title font14 ma30-15">
      <p>基本信息</p>
    </div>
    <!-- 基本信息 -->
    <el-form
      :model="ruleForm"
      :rules="ruleFormRules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <div class="pa15 bor7 details">
        <div class="clearfix">
          <div class="fr details-but">
            <router-link to="/my_activities" class="primary1 hover_cf"
              >返回</router-link
            >
          </div>
        </div>
        <el-form-item label="活动标题" prop="title" class="font12" required>
          <el-input
            v-model="ruleForm.title"
            placeholder="请输入活动标题，不少于5个字"
          ></el-input>
        </el-form-item>

        <el-form-item label="举办时间" required class="wid50 font12">
          <el-col :span="11">
            <el-form-item prop="start_datetime">
              <el-date-picker
                type="datetime"
                v-model="ruleForm.start_datetime"
                format="yyyy-MM-dd HH:mm"
                value-format="yyyy-MM-dd HH:mm"
                style="width: 100%"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col class="line" :span="2">至</el-col>
          <el-col :span="11">
            <el-form-item prop="end_datetime">
              <el-date-picker
                type="datetime"
                v-model="ruleForm.end_datetime"
                format="yyyy-MM-dd HH:mm"
                value-format="yyyy-MM-dd HH:mm"
                style="width: 100%"
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-form-item>

        <el-form-item label="活动地址" required class="font12">
          <el-col :span="5" class="address_col3 ny_address_w100">
              <vCity ref="getConCity" :setCity="ruleForm.city"  :key="ruleForm.city"></vCity>
          </el-col>
          <el-col :span="19">
            <el-form-item prop="address">
              <el-input
                v-model="ruleForm.address"
                placeholder="请输入详细地址"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-form-item>

        <el-form-item
          label="活动海报"
          prop="image"
          class="font12 huodonghaibao"
          required
        >
          <!-- <img src="../../img/2.jpg" alt /> -->
          <el-row :gutter="20">
            <el-col :span="6" class="p_le_0">
              <el-upload
                class="upload-demo"
                drag
                action="#"
                ref="upload"
                :file-list="files"
                :http-request="handleUpload"
                :auto-upload="true"
              >
                <div class="grid-content bg-purple">
                  <img
                    v-if="imageUrl"
                    :src="imageUrl"
                    v-model="ruleForm.image"
                    class="avatar w100"
                  />
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </div>
              </el-upload>
            </el-col>
            <el-col :span="6" class="p_lr_100">
              <div class="grid-content bg-purple font12">
                <div class="bg-purple-text">
                  <p class="colred">温馨提示</p>
                  1、图片尺寸 1080*640，.jpg 或 .png格式，不超过 4M
                  <br />2、精美海报有助于增加报名量，并有机会获得强力推荐！
                  <div>
                    <!--el-button @click="CancelUpload">取 消</el-button-->
                    <!--el-button
                      type="primary"
                      class="primary"
                      @click="fileChange"
                      >上传海报</el-button-->
                  </div>
                </div>
              </div>
            </el-col>
          </el-row>
        </el-form-item>

        <el-form-item label="活动类型" required class="wid50 font12">
          <el-form-item prop="type">
            <el-select v-model="ruleForm.type" placeholder="活动类型">
              <el-option
                v-for="item in this.defaultList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-form-item>

        <el-form-item
          label="活动人数"
          required
          class="wid50 font12"
          prop="person_num"
        >
          <el-input v-model="ruleForm.person_num"></el-input>
        </el-form-item>

        <el-form-item
          label="费用"
          class="wid50 font12"
          prop="money"
          v-if="ruleForm.is_free == 0"
        >
          <el-input v-model="ruleForm.money"></el-input>
        </el-form-item>

        <el-form-item label="发起人" required class="font12 wid50">
          <span v-for="(neirong, d) in ruleForm.user" :key="d">
            {{ neirong.nickname }}
          </span>
        </el-form-item>
        <el-form-item label="关键词" class="font12 create-label wid50">
          <el-input
            v-model="ruleForm.name"
            placeholder="请输入关键词"
          ></el-input>
        </el-form-item>
        <!-- 判断是否有团队 -->
        <!-- 没有团队 -->
        <el-form-item
          label="团队"
          class="font12 wid50"
          v-if="(this.teamtotal = 0)"
          required
        >
          <span>暂无团队，</span>
          <el-button type="text">去创建一个？</el-button>
        </el-form-item>

        <el-form-item label="团队" class="font12 wid50" v-else required>
          <el-form-item prop="team_id">
            <el-select
              v-model="ruleForm.team_id"
              placeholder="团队"
              @change="getteamUser()"
            >
              <el-option
                v-for="item in this.teamList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-form-item>

        <!-- end -->

        <el-form-item label="主持人" class="font12 details-ten details-fix-duv">
          <el-row :gutter="20">
            <el-col
              :span="3"
              v-for="item in this.dataonLineListSelections"
              :key="item.id"
            >
              <div class="grid-content bg-purple">
                <div>
                  <img :src="$api + item.avatar" alt />
                </div>
                <p class="font12">{{ item.nickname }}</p>
                <p class="font12">主持人</p>
              </div>
            </el-col>
          </el-row>
          <div class="details-fix details-but1" v-if="ruleForm.team_id">
            <el-button
              type="text"
              class="details-but primary"
              @click="dialogVisible = true"
              >重新设置</el-button
            >
          </div>
        </el-form-item>

        <div class="szzcr">
          <el-dialog
            title="设置主持人"
            :visible.sync="dialogVisible"
            width="30%"
            class="host_pop_up"
          >
            <form action="">
              <div class="clearfix">
                <div class="fl">
                  <input
                    v-model="ruleForm.keywords"
                    @change=""
                    size="medium"
                    placeholder="请输入用户昵称"
                  />
                </div>
                <div class="fr">
                  <el-button @click.prevent="searchTeam()">查询</el-button>
                </div>
              </div>
              <el-table
                highlight-current-row
                :data="tableData"
                @selection-change="selectionLineChangeHandle"
                style="width: 100%"
              >
                <el-table-column type="selection" width="30"></el-table-column>
                <el-table-column prop="user.id" label="会员ID">
                </el-table-column>
                <el-table-column prop="user.nickname" label="昵称">
                </el-table-column>
                <el-table-column prop="realname" label="真实姓名">
                </el-table-column>
              </el-table>
            </form>
            <span slot="footer" class="dialog-footer">
              <el-button type="primary" @click="dialogVisible = false"
                >确 定</el-button
              >
            </span>
          </el-dialog>
        </div>
      </div>
      <!-- 参与人员开始 -->
      <div class="active_join_number">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="参与人员" class="title font14" name="first">
            <div class="take_part bor7">
              <ul class="clearfix">
                <li v-for="(neirong, d) in this.teamuserList" :key="d">
                  <div>
                    <div class="img">
                      <img :src="$api + neirong.user.avatar" alt />
                    </div>
                    <div class="name">{{ neirong.user.nickname }}</div>
                    <div class="text">参与人员</div>
                    <el-button
                      type="text"
                      class="hover_42"
                      @click="
                        sendMsgToOne(
                          '' + neirong.user.id + '',
                          '' + neirong.user.nickname + ''
                        )
                      "
                      >发消息</el-button
                    >
                    <el-button
                      type="text"
                      class="hover_42"
                      @click="
                        getMemberDetail(
                          '' + neirong.name + '',
                          '' + neirong.phone + '',
                          '' + neirong.email + '',
                          '' + neirong.sex + '',
                          '' + neirong.city + ''
                        )
                      "
                      >会员详情</el-button
                    >
                  </div>
                </li>
              </ul>
              <el-empty
                description="暂无人员加入"
                v-if="teamuserPageInfo.total == 0"
              ></el-empty>
              <div class="ta">
                <el-pagination
                  layout="  prev, next "
                  :page-size="page_size"
                  @current-change="current_change"
                  :current-page.sync="currentPage"
                  :pager-count="5"
                  :total="teamuserPageInfo.total"
                  v-if="teamuserPageInfo.total > 10"
                >
                </el-pagination>

                <el-button
                  type="text"
                  class="sxqd cf"
                  @click="sendMsgToOne('', '所有的参与人员')"
                  v-if="teamuserPageInfo.total > 0"
                  >群发消息</el-button
                >
                <el-button
                  type="primary"
                  class="sxqd"
                  @click="exportMember()"
                  v-if="teamuserPageInfo.total > 0"
                  >导出会员</el-button
                >
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="等待参与者" class="title font14" name="second">
            <div class="take_part bor7">
              <ul class="clearfix">
                <li v-for="(neirong, d) in this.teamuserListTwo" :key="d">
                  <div>
                    <div class="img">
                      <img :src="$api + neirong.user.avatar" alt />
                    </div>
                    <div class="name">{{ neirong.user.nickname }}</div>
                    <div class="text">参与人员</div>
                    <el-button
                      type="text"
                      class="hover_42"
                      @click="
                        sendMsgToOne(
                          '' + neirong.user.id + '',
                          '' + neirong.user.nickname + ''
                        )
                      "
                      >发消息</el-button
                    >
                    <el-button
                      type="text"
                      class="hover_42"
                      @click="
                        getMemberDetail(
                          '' + neirong.name + '',
                          '' + neirong.phone + '',
                          '' + neirong.email + '',
                          '' + neirong.sex + '',
                          '' + neirong.city + ''
                        )
                      "
                      >会员详情</el-button
                    >
                  </div>
                </li>
              </ul>
              <el-empty
                description="暂无人员加入"
                v-if="teamuserPageInfoTwo.total == 0"
              ></el-empty>
              <div class="ta">
                <el-pagination
                  layout="  prev, next "
                  :page-size="page_size"
                  @current-change="current_changeTwo"
                  :current-page.sync="currentPage"
                  :pager-count="5"
                  :total="teamuserPageInfoTwo.total"
                  v-if="teamuserPageInfoTwo.total > 10"
                >
                </el-pagination>

                <!--el-button
                  type="text"
                  class="sxqd cf"
                  @click="sendMsgToOne('', '所有的参与人员')"
                  v-if="teamuserPageInfo.total > 0"
                  >群发消息</el-button
                >
                <el-button
                  type="primary"
                  class="sxqd"
                  @click="exportMember()"
                  v-if="teamuserPageInfo.total > 0"
                  >导出会员</el-button
                -->
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>

      <!-- 参与人员结束 -->
      <!-- 参与人员弹出开始 -->
      <div class="list_info">
        <el-dialog title="消息详情" :visible.sync="dialogVisible1" width="40%">
          <div>
            <div class="text">
              发送给：
              <span>{{ sendname }}</span>
              <!--el-select
                v-model="value"
                multiple
                filterable
                allow-create
                default-first-option
                placeholder="请选择文章标签"
              >
                <el-option
                  v-for="item in renyuan"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select-->
            </div>
            <div class="text">消息详情</div>
            <div class="textarea">
              <textarea v-model="msg" id=""></textarea>
            </div>
          </div>
          <span slot="footer" class="dialog-footer">
            <div class="ta">
              <el-button type="primary fsxx" @click="sendMsg()">发送</el-button>
            </div>
          </span>
        </el-dialog>
      </div>
      <!-- 参与人员弹出结束 -->
      <!-- 会员详情弹出开始 -->
      <div class="number_detail list_info">
        <el-dialog
          title="参与人员详情"
          :visible.sync="memberDetail"
          width="40%"
        >
          <el-form :label-position="menberDetailPosition">
            <el-form-item label="真实姓名">
              <el-input v-model="memberData.name" disabled></el-input>
            </el-form-item>
            <el-form-item label="手机号">
              <el-input v-model="memberData.phone" disabled></el-input>
            </el-form-item>
            <el-form-item label="电子邮箱">
              <el-input v-model="memberData.email" disabled></el-input>
            </el-form-item>
            <el-form-item label="性别" prop="resource">
              <el-radio-group v-model="memberData.sex">
                <el-radio label="男" value="1" disabled></el-radio>
                <el-radio label="女" value="2" disabled></el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="所在城市">
              <el-input v-model="memberData.city" disabled></el-input>
            </el-form-item>
          </el-form>
        </el-dialog>
      </div>
      <!-- 会员详情弹出介绍 -->

      <!-- 活动内容开始 -->
      <div class="title font14 ma30-15">
        <p>活动内容</p>
      </div>
      <!-- 活动内容 -->
      <div class="pa15 bor7 details-fng">
        <div class="quill-box">
          <el-form-item prop="content">
            <quill-editor
              v-model="ruleForm.content"
              :options="editorOption"
              ref="content"
            ></quill-editor>
          </el-form-item>
        </div>
      </div>
    </el-form>
    <div class="ta mt20">
      <el-button type="submit" class="baocun" @click="handleSubmit">
        保存活动信息
      </el-button>
    </div>
  </div>
</template>


<style lang="less">
.szzcr .el-table th.el-table__cell:nth-child(1) > .cell {
  padding-left: 14px !important;
}
.host_pop_up .el-dialog__header {
  padding: 20px;
  border-bottom: 1px solid #ddd;
}
.avatar.w100 {
  object-fit: cover;
  width: 100% !important;
}
.details-but {
  border: none;
  border-radius: 5px;
}
.host_pop_up {
  .el-table .el-table__cell {
    text-align: center;
  }
  .el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
    background-color: #ecf5ff;
  }
  .el-table--fit {
    border: 1px solid #ebeef5;
    border-bottom: none;
    margin-top: 30px;
  }
  .el-table th.el-table__cell > .cell {
    font-weight: normal;
    color: #000;
  }
  .el-dialog__footer {
    padding: 0 0 30px 0;
    text-align: center;
  }
  .el-dialog__body {
    padding-bottom: 30px;
  }
  .el-button--primary {
    padding-left: 40px;
    padding-right: 40px;
    background: #409eff !important;
    border-color: #409eff !important;
  }
  .el-button--primary:hover {
    color: #409eff !important;
    background: transparent !important;
  }
  form {
    .fl {
      width: 70%;
      input {
        width: 100%;
        line-height: 40px;
        padding: 0;
        border: 1px solid #ddd;
        border-radius: 5px;
        padding: 0 15px;
      }
    }
    .fr {
      width: 25%;
      button {
        width: 100%;
        line-height: 40px;
        background: #409eff;
        border: none;
        border: 1px solid #409eff;
        color: #fff;
        text-align: center;
        padding: 0;
        border-radius: 5px;
        transition: all 0.5s;
      }
      button:hover {
        background: transparent;
        color: #409eff;
        transition: all 0.5s;
      }
    }
  }
}
.primary1:hover,
.sxqd:hover {
  background: #fff !important;
  color: #409eff !important;
}
// .host_pop_up table tr:nth-child(1) .el-checkbox__inner {
//   display: none;
// }
.details-fix-duv {
  .el-col-3:nth-child(1) {
    padding-left: 0 !important;
  }
}
.list_info .el-dialog__header {
  padding-bottom: 20px !important;
  border-bottom: 1px solid #ddd !important;
}
.list_info .text {
  color: #000;
}
.list_info .el-dialog__body {
  padding: 20px;
}
.list_info .el-dialog__headerbtn .el-dialog__close {
  font-size: 20px;
}
.list_info .textarea {
  width: 100%;
  height: 300px;
  border: 1px solid #ddd;
  margin-top: 15px;
  padding: 15px;
  color: #000;
  line-height: 26px;
}
.list_info .textarea textarea {
  width: 100%;
  height: 100%;
  border: none;
}
.fsxx,
.sxqd {
  padding: 0.75rem 0 !important;
  width: 7.5rem;
}
.sxqd {
  color: #fff;
}
.sxqd:last-child,
.sxqd:nth-last-child(2) {
  background: #f20404 !important;
  border-color: #f20404 !important ;
}
.sxqd:last-child:hover,
.sxqd:nth-last-child(2):hover {
  border-color: #f20404 !important ;
  color: #f20404 !important;
  background: #fff !important;
}
.fsxx:hover {
  background: #fff !important;
  color: #4285f4 !important;
}
.active_join_number {
  margin-top: 1.25rem;
}
.active_join_number .el-tabs__item {
  font-size: 1rem;
}

</style>

<style scoped>
html {
  height: 100% !important;
  overflow-y: hidden !important;
}
.details .demo-ruleForm > div label {
  text-align: left;
  font-size: 0.75rem;
}
.bcxx {
}
.details .line {
  text-align: center;
}
.el-select {
  width: 100%;
}
.p_le_0 {
  padding-left: 0 !important;
}

.details .el-col-20 {
  width: 82.33333%;
  margin-left: 1%;
}
.wid50 {
  width: 50%;
}
.details-fix .el-button {
  padding: 0.3125rem 0.625rem;
  font-size: 0.875rem;
}
.details-fix .el-button--success {
  background: #19a15f;
}
.el-form-item > label {
  text-align: left !important;
}
.details .font12 label {
  text-align: left;
  font-size: 0.75rem;
}
.details-fix-duv .bg-purple {
  border: 1px solid #d8d8d8;
  text-align: center;
  color: #b2b2b2;
  padding: 3rem 0;
}
.details-fix-duv .bg-purple:hover {
  border-color: #4285f4;
}
.details-fix-duv .el-col-5 {
  width: 20%;
  margin-bottom: 1.25rem;
}
.details-fix-duv .bg-purple p:nth-of-type(1) {
  color: #545556;
  margin: 1.25rem 0 0.625rem;
}
.details-fix-duv .bg-purple img {
  width: 6.375rem;
  object-fit: cover;
}
.quill-box .quill-editor {
  overflow: hidden;
  font-style: initial;
}
.ql-toolbar.ql-snow + .ql-container.ql-snow {
  height: 100% !important;
  position: relative;
  /* min-height: 14.0625rem;
  font-style: initial; */
}
.ql-editor {
}
.details-but .el-button {
  padding: 0.75rem 2rem;
}
.details-but {
  margin-bottom: 1.25rem;
}
.details-ten .bg-purple p:nth-of-type(1) {
  color: #545556;
  margin: 0.3rem 0;
}
.details-ten .bg-purple p {
  line-height: 1.5625rem;
}
.details-ten .bg-purple {
  padding: 1.8rem 0;
}
.details-ten .bg-purple img {
  width: 3.75rem;
  height: 3.75rem;
  border-radius: 50%;
}
.details-but1 {
  padding-left: 10px;
  margin-top: 0.9375rem;
}
.address_col3 .el-cascader {
  width: 100%;
}
.take_part ul {
  padding: 2.5rem 0 0rem;
}

.take_part ul li {
  width: 20%;
  padding: 0 2.5rem;
  margin-bottom: 2.5rem;
  text-align: center;
  float: left;
}
.take_part {
  padding-bottom: 2.5rem;
}
.take_part ul li > div {
  padding: 2.5rem 0.9375rem 1.5rem;
  border: 1px solid #ddd;
}
.take_part ul li .img,
.take_part ul li .img img {
  border-radius: 50%;
}
.take_part ul li .img img {
  width: 6.25rem;
  height: 6.25rem;
}
.take_part ul li .name {
  font-size: 1.125rem;
  margin-top: 1.25rem;
  font-weight: 600;
  margin-bottom: 0.625rem;
}
.hover_42 {
  color: #4285f4;
}
.hover_42:hover {
  color: #f20404;
}

@media (max-width: 990px) {
  .details-fix-duv .el-col-3 {
    width: 20%;
  }
  .details-ten .bg-purple p {
    font-size: 14px;
  }
  .details-ten .bg-purple p:nth-of-type(1) {
    margin-top: 10px;
  }
  .take_part ul li {
    width: 25%;
    padding: 0 20px;
  }
}
@media (max-width: 767px) {
  .details-fix-duv .el-col-3 {
    width: 50%;
  }
  .take_part ul li {
    width: 50%;
    padding: 0 15px;
  }
  .details-fix-duv .el-col-3:nth-child(1) {
    padding-left: 15px !important;
  }
  .p_le_0 {
    padding-left: 10px !important;
  }
  .take_part ul li > div {
    padding: 20px 0;
  }
}
</style>
<style>
.number_detail .el-form-item__label {
  font-weight: normal;
  padding-bottom: 0;
  margin-bottom: 0;
  line-height: 1.875rem;
  color: #333;
}
.number_detail .el-form-item__content {
  line-height: 1.875rem;
}
.number_detail .el-radio {
  margin-bottom: 0;
}
.number_detail .el-radio-group,
.number_detail .el-cascader {
  width: 100%;
}
</style>

<script>
import { quillEditor, Quill } from "vue-quill-editor";
import { formatDate } from "../../assets/data.js";
import { regionData, CodeToText, TextToCode } from "element-china-area-data";
import fileDownload from "js-file-download";
import vCity from "../../components/City.vue";

const toolbarOptions = [
  ["bold", "italic", "underline", "strike"],
  ["blockquote", "code-block"],
  [{ list: "ordered" }, { list: "bullet" }],
  [{ indent: "-1" }, { indent: "+1" }],
  [{ color: [] }, { background: [] }],
  [{ align: [] }],
  ["link", "image"],
  ["clean"],
  [{ size: ["small", false, "large", "huge"] }],
  [{ header: [1, 2, 3, 4, 5, 6, false] }],
  [{ font: [] }],
];

export default {
  // 时间戳
  filters: {
    formatDate(time) {
      time = time * 1000;
      let date = new Date(time);
      return formatDate(date, "yyyy-MM-dd hh:mm:ss");
    },
  },
  data() {
    return {
      dialogVisible1: false, //参与人员弹出
      memberDetail: false, //会员详情弹出
      memberData: [],
      dialogVisible: false, //弹出框
      tableData: [],
      multipleSelection: [],
      dataonLineListSelections: [], //选中的主持人
      teamuserList: [], //选中的主持人
      teamuserPageInfo: [], //选中的主持人、分页
      teamuserListTwo: [], //未选中的主持人
      teamuserPageInfoTwo: [], //未选中的主持人、分页
      content: ``,
      imageUrl: "",
      defaultList: [],
      teamList: [],
      teamtotal: 0,
      cityList: [],
      info: [],
      sendname: "所有的参与人员",
      msg: "",
      page_size: 8, //每页多少数据
      currentPage: 1, //默认当前页为第一页
      infoNum: [],
      ruleForm: [],
      menberDetailPosition: "right",
      activeName: "first",
      ruleFormRules: {
        title: [
          {
            type: "string",
            required: true,
            message: "活动名称必填",
            trigger: "blur",
          },
          { max: 30, message: "活动名称长度不能超过30位" },
        ],
        image: [
          {
            type: "string",
            required: true,
            message: "图片要上传",
            trigger: "blur",
          },
        ],
        address: [
          {
            type: "string",
            required: true,
            message: "地址必填",
            trigger: "blur",
          },
        ],
        type: [{ required: true, message: "活动类型必填", trigger: "blur" }],
        start_datetime: [
          { required: true, message: "开始时间必填", trigger: "blur" },
        ],
        end_datetime: [
          { required: true, message: "结束时间必填", trigger: "blur" },
        ],
        person_num: [
          { required: true, message: "活动人数必填", trigger: "blur" },
        ],
        team_id: [{ required: true, message: "团队必填", trigger: "blur" }],
        is_free: [{ required: true, message: "是否收费", trigger: "blur" }],
        content: [{ required: true, message: "内容必填", trigger: "blur" }],
      },
      files: [],
      editorOption: {
        placeholder: "内容编辑",
        modules: {
          toolbar: {
            container: toolbarOptions,
            // ...
          },
        },
      },
      cityArr: [],
      cityArr1: [],
      options: regionData,
      selectedOptions: [],

      renyuan: [
        {
          value: "jason",
          label: "jason",
        },
        {
          value: "lily",
          label: "lily",
        },
        {
          value: "amy",
          label: "amy",
        },
      ],
      value: [],
    };
  },

  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    getMemberDetail(name, phone, email, sex, city) {
      this.memberDetail = true;
      this.memberData.name = name;
      this.memberData.phone = phone;
      this.memberData.email = email;
      this.memberData.sex = sex;
      this.memberData.city = city;
    },
    onEditorReady(editor) {
      // 准备编辑器
    },
    onEditorBlur() {}, // 失去焦点事件
    onEditorFocus() {}, // 获得焦点事件
    onEditorChange() {}, // 内容改变事件
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("图片尺寸 1080*640，.jpg 或 .png格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传图片尺寸不能超过 4M!");
      }
      return isJPG && isLt2M;
    },
    //发送单人
    sendMsgToOne(user_id, nickname) {
      this.dialogVisible1 = true;
      this.ruleForm.receive_type = "one";
      this.sendname = nickname;
      this.ruleForm.receive_id = user_id;
    },
    //发送消息
    sendMsg() {
      var that = this;
      var url = this.$api + "/api/activitymessage/add";

      if (this.sendname == "所有的参与人员") {
        this.ruleForm.receive_id = "";
        this.ruleForm.receive_type = "all";
      } else {
        this.ruleForm.receive_type = "one";
      }

      if (this.teamuserPageInfo.total == 0) {
        that.$message.error("暂无人员加入");
        return false;
      }

      if (!this.msg) {
        that.$message.error("消息不能为空");
        return false;
      }

      var jsons = {
        activity_id: this.$route.query.id,
        content: this.msg,
        type: this.ruleForm.receive_type,
        receive_id: this.ruleForm.receive_id,
      };

      this.$axios
        .post(url, jsons)
        .then((res) => {
          //console.log(res.data);
          if (res.data.code == 1) {
            that.$message({
              message: res.data.msg,
              type: "success",
            });
            that.dialogVisible1 = false;
          } else {
            that.$message.error(res.data.msg);
          }
        })
        .catch((Error) => {
          //console.log(Error);
          that.$message.error(Error);
        });
    },
    exportMember() {
      var that = this;
      this.$axios
        .get(
          this.$api +
            "//api/my/exportactivityuser?activity_id=" +
            this.$route.query.id,
          { responseType: "blob" }
        )
        .then(function (response) {
          fileDownload(response.data, "会员列表.xls");
        })
        .catch(function (error) {
          //console.log(error);
        });
    },
    getteamuserList() {
      //console.log("人员加入", 12313);
      var that = this;
      this.$axios
        .get(
          this.$api +
            "//api/activity/activityuser?activity_id=" +
            this.$route.query.id +
            "&nickname=&page_no=" +
            that.currentPage +
            "&page_size=" +
            that.page_size
        )
        .then(function (response) {
          that.teamuserList = response.data.data.data;
          that.teamuserPageInfo = response.data.data;
          //console.log("teamuserPageInfo", that.teamuserPageInfo);
        })
        .catch(function (error) {
          //console.log(error);
        });
    },
    current_change(currentPage) {
      //改变当前页
      this.currentPage = currentPage;
      this.getteamuserList();
    },
    getteamuserListTwo() {
      //console.log("人员加入", 12313);
      var that = this;
      this.$axios
        .get(
          this.$api +
          "//api/activity/activityuser?is_go=0&activity_id=" +
          this.$route.query.id +
          "&nickname=&page_no=" +
          that.currentPage +
          "&page_size=" +
          that.page_size
        )
        .then(function (response) {
          that.teamuserListTwo = response.data.data.data;
          that.teamuserPageInfoTwo = response.data.data;
          //console.log("teamuserPageInfo", that.teamuserPageInfo);
        })
        .catch(function (error) {
          //console.log(error);
        });
    },
    current_changeTwo(currentPage) {
      //改变当前页
      this.currentPagTwo = currentPage;
      this.getteamuserListTwo();
    },
    getActivityJoin() {
      var that = this;
      this.$axios
        .get(this.$api + "//api/activity/select")
        .then(function (response) {
          that.defaultList = response.data.data;
          ////console.log(that.defaultList);
        })
        .catch(function (error) {
          //console.log(error);
        });
    },
    handleChange(value) {
      //console.log(value);
      var provinceCode = CodeToText[value[0]];
      var cityCode = CodeToText[value[1]];
      var orgion = CodeToText[value[2]];
      ////console.log(provinceCode)
      ////console.log(cityCode)
      ////console.log(orgion)
      this.ruleForm.city = [value[0], value[1], value[2]];
      this.ruleForm.city_text = provinceCode + "/" + cityCode + "/" + orgion;
    },
    //获取省份
    getcityList() {
      var that = this;
      this.$axios
        .get(this.$api + "//api/common/cityselect")
        .then(function (response) {
          that.cityList = response.data.data;
          ////console.log("cityList", that.cityList);
        })
        .catch(function (error) {
          //console.log(error);
        });
    },
    changeCity() {
      //省切换
      var me = this;
      var item;
      //console.log(111, me.prov);
      me.cityList.forEach(function (ele) {
        if (ele.n === me.ruleForm.prov) {
          //判断与prov是否相等，相等的表示被切换选中的省份
          item = ele;
        }
      });
      if (item) {
        this.cityArr = item.s; //将选中的item的sub设置给cityArr 用于显示市
        this.city = item.s[0].n; //默认选择第一个市
        //console.log("city", this.cityArr);

        this.cityArr1 = [];
        this.city1 = "";
      }
    },
    changeCity1() {
      //市切换
      var me = this;
      var item;
      me.cityArr.forEach(function (ele) {
        if (ele.n === me.ruleForm.city) {
          //判断与city是否相等，相等的表示被切换选中的市
          item = ele;
        }
      });
      if (item) {
        this.cityArr1 = item.s; //将选中的item的sub设置给cityArr1 用于显示区
        this.city1 = item.s[0].n; //默认选择第一个区
        //console.log("city1", this.cityArr1);
      }
    },
    //获取我的团队
    getteamList(id) {
      var that = this;
      this.$axios
        .get(
          this.$api +
            "/api/my/myteam?page_no=1&page_size=100&search=name:;type:;user_id:" +
            id +
            ";&order&sort"
        )
        .then(function (response) {
          that.teamList = response.data.data.data;
          that.teamtotal = response.data.data.page.total;
          //console.log("teamList", that.teamList);
          //console.log("teamtotal", that.teamtotal);
        })
        .catch(function (error) {
          //console.log(error);
        });
    },
    //获取团队成员
    getteamUser() {
      var that = this;
      //console.log("ruleForm", this.ruleForm);
      if (!this.ruleForm.team_id) {
        return false;
      }

      if (!this.ruleForm.keywords) {
        this.ruleForm.keywords = "";
      }

      this.$axios

        .get(
          this.$api +
            "/api/my/teamuserselect?team_id=" +
            this.ruleForm.team_id +
            "&nickname=" +
            this.ruleForm.keywords
        )
        .then(function (response) {
          that.tableData = response.data.data.data;
          //console.log("tableData", that.tableData);
        })
        .catch(function (error) {
          //console.log(error);
        });
    },
    //提交
    handleSubmit() {
      var that = this;
      this.$nextTick(() => {
        this.$refs.ruleForm.validate(async (valid) => {
          if (valid) {
            if (this.ruleForm.is_free == 1) {
              this.ruleForm.money = "";
            }

            if (!this.$refs["getConCity"].city) {
              this.$message.error("请输入所在城市");
              return false;
            }

            if (this.ruleForm.is_free == 0 && this.ruleForm.money == "") {
              that.$message.error("收费必填");
              return false;
            }

            var ids = "";
            if (this.dataonLineListSelections.length > 0) {
              for (var i = 0; i < this.dataonLineListSelections.length; i++) {
                ids += this.dataonLineListSelections[i].id + ",";
                //console.log(i, this.dataonLineListSelections[i].id);
              }
            }

            ids = ids.replace(/^,+/, "").replace(/,+$/, "");
            this.ruleForm.contactuser_ids = ids;

            this.ruleForm.start_datetime =
              new Date(this.ruleForm.start_datetime).getTime() / 1000;
            this.ruleForm.end_datetime =
              new Date(this.ruleForm.end_datetime).getTime() / 1000;

            //console.log("ruleForm-submit", this.ruleForm);

            //城市拼接
            //this.ruleForm.city = this.ruleForm.prov + '/' + this.ruleForm.city + '/' + this.ruleForm.city1;

            //定义一个json示例
            if (this.$route.query.id) {
              var url = this.$api + "/api/activity/edit";
              var jsons = {
                id: this.$route.query.id,
                //team_id: this.ruleForm.team_id,
                title: this.ruleForm.title,
                type: this.ruleForm.type,
                person_num: this.ruleForm.person_num,
                image: this.ruleForm.image,
                content: this.ruleForm.content,
                start_datetime: this.ruleForm.start_datetime,
                end_datetime: this.ruleForm.end_datetime,
                city: this.$refs["getConCity"].city,
                address: this.ruleForm.address,
                money: this.ruleForm.money,
                is_free: this.ruleForm.is_free,
                keywords: this.ruleForm.keywords,
                contactuser_ids: this.ruleForm.contactuser_ids,
              };
            } else {
              var url = this.$api + "/api/activity/add";
              var jsons = {
                team_id: this.ruleForm.team_id,
                title: this.ruleForm.title,
                type: this.ruleForm.type,
                person_num: this.ruleForm.person_num,
                image: this.ruleForm.image,
                content: this.ruleForm.content,
                start_datetime: this.ruleForm.start_datetime,
                end_datetime: this.ruleForm.end_datetime,
                city: this.$refs["getConCity"].city,
                address: this.ruleForm.address,
                money: this.ruleForm.money,
                keywords: this.ruleForm.keywords,
                contactuser_ids: this.ruleForm.contactuser_ids,
              };
            }

            this.$axios
              .post(url, jsons)
              .then((res) => {
                //console.log(res.data);
                if (res.data.code == 1) {
                  that.$message({
                    message: res.data.msg,
                    type: "success",
                  });
                  //location.href = "/#/my_activities";
                  that.$router.push("/my_activities");
                } else {
                  that.$message.error(res.data.msg);
                }
              })
              .catch((Error) => {
                //console.log(Error);
                that.$message.error(Error);
              });
          }
        });
      });
    },
    //上传文件开始
    handleUpload(raw) {
      this.files.push(raw.file);
      this.fileChange();
      // //console.log(files);
    },
    async fileChange() {
      if (this.files.length > 1) {
        //this.$message.warning(`当前限制只能上传选择 1 个文件`);
        return;
      } else {
      }
      const loading = this.$loading({
        lock: true,
        text: "上传中...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      this.$refs.upload.submit(); // 这里是执行文件上传的函数，其实也就是获取我们要上传的文件
      let random = Math.random();
      let formData = new FormData();
      // formData.append("file", param.file);
      //formData.append("user_id", localStorage.user_id);
      this.files.forEach(function (file) {
        formData.append("file", file); // 因为要上传多个文件，所以需要遍历一下才行
        //不要直接使用我们的文件数组进行上传，你会发现传给后台的是两个Object
      });
      let res = await this.$axios.post(
        this.$api + `/api/common/upload`,
        formData
      );
      //console.log(res);
      // JSON.parse(res)
      if (res.data.code == 1) {
        this.$refs.upload.clearFiles();
        this.files = [];
        let objList = [];
        loading.close();
        this.imageUrl = this.$api + res.data.data.url;
        this.$set(this.ruleForm, "image", res.data.data.url);
      } else {
        loading.close();
        this.$message.error("上传文件失败" + res.data.msg);
      }
    },
    handExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 5 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      );
    },
    CancelUpload() {
      this.files = [];
      this.$refs.upload.clearFiles();
    },
    handFileSuccess(file) {
      //console.log(file);
      this.files = [];
      this.$refs.upload.clearFiles();
    },
    handleRemove(file, fileList) {
      // //console.log(file, fileList);
      this.files = fileList;
    },
    beforeRemove(file, fileList) {
      // //console.log(file, fileList);
    },
    //上传文件结束

    // 主持人弹框开始
    // handleClose(done) {
    //   this.$confirm("确认关闭？")
    //     .then((_) => {
    //       done();
    //     })
    //     .catch((_) => {});
    // },
    // 主持人弹框结束

    //主持人多选
    selectionLineChangeHandle(val) {
      this.dataonLineListSelections = val;

      for (var i = 0; i < this.dataonLineListSelections.length; i++) {
        this.dataonLineListSelections[i] =
          this.dataonLineListSelections[i].user;
      }
      //console.log("aaa", val);
    },
    //获取选中的数据
    toggleSelection() {
      ////console.log('', this.dataonLineListSelections);
    },
    getInfo() {
      if (!this.$route.query.id) {
        return false;
      }
      var that = this;
      this.$axios
        .get(this.$api + "//api/activity/detail?id=" + this.$route.query.id)
        .then(function (response) {
          that.ruleForm = response.data.data;
          that.imageUrl = that.$api + response.data.data.image;
          that.dataonLineListSelections = response.data.data.users;
          //console.log("已选择的主持人", that.dataonLineListSelections);
          that.ruleForm.start_datetime = that.ruleForm.start_datetime_text;
          that.ruleForm.end_datetime = that.ruleForm.end_datetime_text;
          that.getteamUser();
          that.getteamuserList();
          that.getteamuserListTwo();

          //城市分开
          // var tcity = that.ruleForm.city;
          // that.ruleForm.city_text = that.ruleForm.city;
          // var tcity = tcity.split("/");
          // var code1 = TextToCode[tcity[0]].code;
          // var code2 = TextToCode[tcity[0]][tcity[1]].code;
          // var code3 = TextToCode[tcity[0]][tcity[1]][tcity[2]].code;
          // that.ruleForm.city = [code1, code2, code3];
        })
        .catch(function (error) {
          //console.log(error);
        });
    },
    searchTeam() {
      this.getteamUser();
    },
    pickerOption() {},
    getUserInfo() {
      var that = this;
      this.$axios
        .get(this.$api + "//api/user/userinfo")
        .then(function (response) {
          that.infoNum = response.data.data;
          that.getteamList(that.infoNum.id);
          //console.log("infoNum1111", that.infoNum);
        })
        .catch(function (error) {
          //console.log(error);
        });
    },
  },

  mounted() {
    document.documentElement.scrollTop = 0;
    this.getActivityJoin();
    this.getcityList();
    this.getteamUser();
    this.getInfo();
    this.getUserInfo();
  },
  components: {
    "quill-editor": quillEditor,
    vCity,
  },
  //搜索数据
  computed: {
    tableData: function () {
      var input = this.search && this.search.toLowerCase();
      var items = this.tableData;
      var items1;
      if (input) {
        items1 = items.filter(function (item) {
          return Object.keys(item).some(function (key1) {
            return String(item[key1]).toLowerCase().match(input);
          });
        });
      } else {
        items1 = items;
      }
      return items1;
    },
  },
};
</script>
